<include file="Public/header"/>

<link rel="stylesheet" href="/Public/admin/adminlte/bootstrap/css/bootstrap-datetimepicker.min.css">
<include file="Public/menu"/>
<!--<script src="__PUBLIC__/js/bootstrap-datepicker.js"></script>-->
<!-- 内容页 -->
<div class="content-wrapper">
    <!-- 面包屑 -->
    <section class="content-header">
        <h1>
            微信设置
            <small>海报样式管理</small>
        </h1>
        <ol class="breadcrumb">
            <li> 海报样式管理</li>
            <li class="active"></li>
        </ol>
    </section>
    <!-- 内容 -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">海报样式管理</h3>


                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form id="form" action="{:U('Poster/add')}" method="post" accept-charset="UTF-8" class="form-horizontal" novalidate="novalidate">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">海报标题</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <input name="Poster[title]" type="text" class="form-control" placeholder="请 控制在13个中文字内！" value="{$ruleInfo['title']}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">海报语言</label>
                                <div class="col-sm-6">

                                    <div class="no-margin">
                                        <table>
                                            <tr>
                    <td>某某某&nbsp;&nbsp;</td><td><input name="Poster[content]" value="{$ruleInfo['content']}" class="form-control ajax-sort" type="text" placeholder="诚邀你加入！"></td>
                                         <td>&nbsp;&nbsp;请 控制在6个中文字内！</td>
                                            </tr>
                                        </table>

                                    </div>
                                </div>
                            </div>

                            <div class="form-group ">
                                <label class="col-sm-2 control-label">上传图片(750*1200)</label>
                                <div class="col-sm-6">
                                    <div class="no-margin">
                                        <button id="browse" type="button" class="btn btn-primary">
                                            <i class="fa fa-fw fa-plus"></i>
                                            选择上传文件
                                        </button>
                                    </div>
                                    <div id="container">
                                        <input type="hidden" name="input-num" class="input-num" />

                                        <ul id="img-list">
                                            <if condition="$ruleInfo['poster_pic'] neq ''">
                                            <li onclick="default_img(this)" class="item"
                                                id="file-o_<?php echo $images[$i]['images_id'];?>">

                                                <div class="pic-box">
                                                     <img class="img" src="{$ruleInfo['poster_pic']}">
                                                </div>
                                                <p class="img_name">{$ruleInfo['poster_pic']}</p>
                                                <p class="img-progress">100%</p>
                                                <input type="hidden" value="{$ruleInfo['poster_pic']}" name="images[]">
                                                <a class="remove-btn glyphicon glyphicon-trash text-danger" href="javascript:void(0)" onclick="deleteImgItem(this)"></a>

                                                <i class="glyphicon glyphicon-ok-sign text-success">背景图</i>

                                            </li>
                                            </if>
                                        </ul>

                                    </div>
                                </div>
                            </div>



                        </div>

                        <input type="hidden" name="Poster[id]" class="input-num" value="{$ruleInfo['id']}" />
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-6">
                                <div class="btn-group pull-right">
                                    <button type="submit" class="btn btn-info pull-right submit_click">提交</button>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>

            </div>
        </div>

    </section>
</div>
<include file="Public/common_footer"/>
<script src="/Public/layer/layer.js"></script>
<!--图片上传-->
<link rel="stylesheet" href="/Public/plupload/css.css" type="text/css">
<script src="/Public/plupload/js/plupload.full.min.js"></script>

<script type="text/javascript">

    $(function(){

        //实例化对象
        var uploader=new plupload.Uploader({
            browse_button : 'browse',//浏览按钮
            url : '/Admin/Upload/image',//请求的接口
            flash_swf_url : '/Public/plupload/js/Moxie.swf',
            silverlight_xap_url : '/Public/plupload/js/js/Moxie.xap',
        });
        //初始化
        uploader.init();
        //选中文件后，先加到列表中，绑定进度条到progress，再上传
        uploader.bind('FilesAdded',function(uploader,files){
            //加到列表中
            for(var i = 0, len = files.length; i<len; i++){
                var file_name = files[i].name; //文件名
                //构造html来更新UI
                var item=$("<li onclick='default_img(this)'>").addClass("item").attr("id","file-"+files[i].id);

                var pic_box=$("<div>").addClass("pic-box").appendTo(item);
                var img=$("<img>").addClass('img').appendTo(pic_box);
                $("<p>").addClass('img_name').text(file_name).appendTo(item);
                var progress=$("<p>").addClass("img-progress").text("100%").appendTo(item);
                item.appendTo("#img-list");
            }
            //绑定进度条
            uploader.bind('UploadProgress',function(uploader,file){
                $('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条
            });
            //绑定单文件上传成功
            uploader.bind('FileUploaded',function(uploader,file,rsp){

                $('#file-'+file.id+' img').attr("src", rsp.response);
                $("<input type='hidden'>").val(rsp.response).attr("name","images[]").appendTo($('#file-'+file.id));
                $("<a>").addClass("remove-btn glyphicon glyphicon-trash text-danger").attr("href","javascript:void(0)").attr("onclick","deleteImgItem(this)").appendTo($('#file-'+file.id));

                // 设置默认图片
                $('#container .input-num').val('0');
                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
            })
            uploader.start();
        });
    })
    // 删除li元素 之前，先判断当前是否是默认图片，如果是就将第一个li元素设置为默认图片
    function deleteImgItem(img) {
        var self_li = $(img).parents("li");

        var input_num_val = $('#container .input-num').val();

        self_li.parents('#img-list').children('li').each(function () {
            var index =  $("#img-list li").index(this);

            if (self_li[0] === this) {  // 判断当前li是不是跟ul下面的li相等
                if (input_num_val == index){
                    $('#container .input-num').val('0');

                    // 设置默认图片
                    var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                    $('#img-list').children('li').eq(0).append(html); // 添加 默认图html
                }
            }

        });
        self_li.remove(); // 删除li元素

        $("#img-list li").each(function () {

            if($(this).children('i').length > 0) {
                $('#container .input-num').val($("#img-list li").index(this));
            }
        });
    }
    // 给点击当前li元素设置默认图片，并且添加input框第几个元素
    function default_img(self) {
        var self = self;
        $(self).parents('#img-list').children('li').each(function () {
            $(this).children('i').remove();
            if (self === this) {  // 判断当前li是不是跟ul下面的li相等
                var index =  $("#img-list li").index(this);
                $('#container .input-num').val(index); // 添加几个的图片，用于上传后台判断

                var html = "<i class='glyphicon glyphicon-ok-sign text-success'>默认图</i>";
                $(self).append(html); // 添加 默认图html
            }
        });

    }
</script>